<template>
    <el-text hidden type="info" size="small"> {{ U.s() }} </el-text>
    <!-- A's editor -->
    <template v-if="ed.s01 != null">
    <el-table :data="ed.s01.L" style="width: 100%; min-height: 0;">
        <el-table-column type="index" width="50" />
        <el-table-column label="Steps" width="">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon><key /></el-icon>
                    <!-- <span style="margin-left: 10px">{{ scope.row.step }}</span> -->
                    <el-input type="textarea" :disabled="P.disabled"  :rows="2"
                              v-model="scope.row.step" style="margin-left: 10px;" placeholder="Please input" clearable />
                </div>
            </template>
        </el-table-column>
        <el-table-column label="Expected" width="">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <el-icon><football/></el-icon>
                    <el-input type="textarea" :disabled="P.disabled" :rows="2"
                        v-model="scope.row.expected" style="margin-left: 10px;" placeholder="Please input" clearable />
                </div>
            </template>
        </el-table-column>
        <el-table-column align="right"  width="50">
            <template #header>
            </template>
            <template #default="scope">
                <el-button :disabled="P.disabled"
                    size="small" type="" :icon="Delete" @click="ed.s01.del(scope.$index, scope.row)" circle  />
            </template>
        </el-table-column>
    </el-table>
    <div style="width: 100%; display: flex; justify-content: center;">
        <el-button v-if="!P.disabled" size="small" style="margin-bottom:.5em; margin-top:.5em;" @click="ed.s01.add0()" circle
                   :icon="Plus"/> 
    </div>
    </template>
    <template v-else>
        <!-- a text area -->
        <el-input type="textarea" :disabled="P.disabled" :rows="17"
                  v-model="T0" style="width: 100%;" placeholder="Please input" clearable />
    </template>
    <el-alert v-if="ed.err !== ''" title="Error" type="error" :description="ed.err" show-icon />
    <!-- 🦜 : hacky:... here we do a hidden attributes that makes U.s() update the T0 -->
</template>


<script setup lang="ts">
 import { watch, reactive, ref, computed, onMounted, onUnmounted } from 'vue'
 import { Close, Delete, Key,Plus, Timer, Checked, Location, Football} from '@element-plus/icons-vue'

 const P = defineProps({
         kind: {
             type: String,
             default: 'text', // default kind
         },
         disabled: Boolean, // not used yet
     });
 const T0 = defineModel('text');
 // const emit = defineEmits(['update:text']);

 watch(() => P.kind, (xnew, x) => {
     console.log('kind changed from', x, 'to', xnew);
     U.try_adapt_to_kind();
 });
 onMounted(() => {
     U.try_adapt_to_kind();
 });


 interface A0{step: string, expected:string}
 function instanceOfA0(o: any): o is A0 {
     return 'step' in o && 'expected' in o;
 }
 class S01_test_steps {
     L: A0[] = [];
     del(index: number, row: any){
         this.L.splice(index, 1);
     }
     add0() {
         this.L.push({step: '', expected: ''});
     }
 }

 const ed = reactive({
     s01: null,// editor for s01
     err: '',
 });

 class U {
     static s01_test_steps = 'test_steps';
     static try_adapt_to_kind = () => {
         console.log('Mounted U08MagicEditor with kind:', P.kind, 's01_test_steps', U.s01_test_steps);
         ed.s01 = null; // reset s01 on kind change
         if (P.kind === U.s01_test_steps) {
             U.try_init_s01();
     }
     }
     static try_init_s01 = () => {
         let s = T0.value;
         console.log('trying to parse string into s01:', s);
         try {
             let o = JSON.parse(s);
             console.log('parsed o', o);
             // o should be array
             if (!Array.isArray(o)) {
                 throw new Error('Parsed object is not an array');
             }

             ed.s01 = new S01_test_steps();
             for (let x of o) {
                 if (!instanceOfA0(x)) {
                     throw new Error('Invalid object structure');
                 }
                 ed.s01.L.push({step: x.step, expected: x.expected});
             }
             // ed.s01.L.push({k: 'K1', v: 'V1'});
             // ed.s01.L.push({k: 'K2', v: 'V2'});
         }catch (e) {
             ed.err = `Error parsing s01: ${e}`;
             console.error('Error parsing s01:', e);
             ed.s01 = null; // reset s01 on error
             // fallback to plain text
         }
     }

     static s = () => {
         if (ed.s01 != null && P.kind === U.s01_test_steps) {
             T0.value =  JSON.stringify(ed.s01.L, null, 2);
         }
         return T0.value;
     }
 }

</script>
